<template>
  <div class="skip-wrapper"
       border-top-1px
       :class="{static:isFixed}">
    <ul class="router-list">
      <router-link to="/home"
                   class="router-item"
                   tag="li">
        <div class="iconfont router-icon">&#xe713;</div>
        <div class="desc">首页</div>
      </router-link>
      <router-link to="/nearby"
                   class="router-item"
                   tag="li">
        <div class="iconfont router-icon">&#xe60c;</div>
        <div class="desc">附近</div>
      </router-link>
      <router-link to="/reserve"
                   class="router-item"
                   tag="li">
        <div class="iconfont router-icon">&#xe6b5;</div>
        <div class="desc">预约</div>
      </router-link>
      <router-link to="/me"
                   class="router-item"
                   tag="li">
        <div class="iconfont router-icon">&#xe60b;</div>
        <div class="desc">我的</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import { setPosition } from '@/assets/js/dom'
export default {
  name: 'CommonSkip',
  data () {
    return {
      height: document.body.clientHeight,
      isFixed: false
    }
  },
  methods: {
    handleChangResize () {
      setPosition(this.height, this.isFixed)
    }
  },
  activated () {
    window.addEventListener('resize', this.handleChangResize)
  },
  destroyed () {
    window.removeEventListener('resize', this.handleChangResize)
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.skip-wrapper
  touch-action none
  position fixed
  z-index 5
  bottom 0
  height 110px
  right 0
  left 0
  background-color $bgcWh
  padding()

  .router-list
    width 100%
    height 100%
    display flex
    justify-content space-between
    box-sizing border-box

    .router-item
      width 140px
      height 100%
      display flex
      flex-direction column
      justify-content center
      align-items center
      color $grayFifth

      .router-icon
        font-size $skipIconFz

      .desc
        font-size $smallFz
        ellipsis()

    .router-link-active
      color $navColor

.static
  display none
</style>
